import React from 'react'
import { AgGridReact } from 'ag-grid-react'
import { TableResize } from 'ag-grid-addons'

export default class DockerTable extends React.Component {
  constructor () {
    super()
    this.gridOptions = {
      onModelUpdated: () => {
        if (this.api) {
          this.api.sizeColumnsToFit()
        }
      },
      onGridReady: (params) => { this.onGridReady(params) },
      overlayLoadingTemplate:
      '<span style="padding:10px;background-color: #fff; border: 1px solid #666">数据加载</span>',
      overlayNoRowsTemplate: '<span style="padding:10px;background-color: #fff; border: 1px solid #666">暂无数据</span>',
      enableFilter: true,
      rowStyle: { 'font-size': '12px' },
      animateRows: true
    }
    this.TableResize = TableResize.bind(this)
  }

  onGridReady (params) {
    this.api = params.api
    this.TableResize()
  }

  render () {
    const columnDefs = [
      { headerName: '主机', field: 'name', suppressMenu: true },
      { headerName: '状态', field: 'status', suppressMenu: true },
      { headerName: '报告', field: 'text', suppressMenu: true }
    ]
    const rowData = [
      { name: 'k2data-1', status: 'sucess', text: 'sdg' },
      { name: 'k2data-2', status: 'sucess', text: 'sdg' },
      { name: 'k2data-3', status: 'sucess', text: 'sdg' }
    ]
    return (
      <div style={{ height: '100%' }} className='ag-fresh'>
        <AgGridReact
          columnDefs={columnDefs}
          gridOptions={this.gridOptions}
          rowData={rowData}
          enableColResize='true'
          enableSorting='true'
          rowHeight='34'
          quickFilterText=''
          headerHeight='28'
          rowBuffer='50'
          debug='false'
          />
      </div>
    )
  }
}
